<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="js/swiper-4.2.6.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/swiper-4.2.6.min.css"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/font.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/ui.css">
    <title></title>
    <!-- 首页 -->
    <style>
    </style>
</head>
<body>
<div class="scroll-content index" style="overflow:auto;background: #F5F5F5;">
    <div class="top-public">
        <span class="public-center">VIP会员续费</span>        
        <!--<img src="images/top-publick-click.png" alt="" class="public-right">-->
    </div>
    <div class="con_list swiper-container">
        <div class="swiper-wrapper"></div>
         <div class="swiper-pagination"></div>
    </div>
    <div class="notice">
        <img src="images/index_lb.png" alt="">
        <a href="javascript:;"><span class="notice-content">关于服务器升级改造的公告</span></a>
        <span class="notice-time">09-20</span>
    </div>
    <div class="top-option">
        <!--<dl>-->
            <!--<dt><a href="publishDemand.html"><img src="images/index_option1.png" alt=""></a></dt>-->
            <!--<dd>发送需求</dd>-->
        <!--</dl>-->
        <!--<dl id="topType">-->
            <!--<dt><a href="javascript:;"><img src="images/index_option2.png" alt=""></a></dt>-->
            <!--<dd>域名注册</dd>-->
        <!--</dl>-->
        <!--<dl id="topType2">-->
            <!--<dt><a href="javascript:;"><img src="images/index_option3.png" alt=""></a></dt>-->
            <!--<dd>定制开发</dd>-->
        <!--</dl>-->
    </div>
    <div class="main-product">
        <div id="mainList" class="product-title"></div>
        <div id="goodsFind" class="product-box"></div>
    </div>
    <div class="feature-product">
        <div id="char_name" class="product-title"></div>
        <div id="charList" class="product-box"></div>
    </div>
    <div class="hot-product">
        <div id="hots_name" class="product-title"></div>
        <div id="hotList2" class="product-box"> </div>
    </div>
    <div class="tab-bar">
        <a href="index.html" class="tab-button active">
            <span class="tab-button-icon icon-home"></span>
            <span class="tab-button-txt">首页</span>
        </a>
        <a href="javascript:;" class="tab-button kf">
            <span class="tab-button-icon icon-kf"></span>
            <span class="tab-button-txt">客服</span>
        </a>
        <a href="my.html" class="tab-button">
            <span class="tab-button-icon icon-my"></span>
            <span class="tab-button-txt">我的</span>
        </a>
    </div>
    <div class="pop-up">
        <p>400-800-9360</p>
        <ul>
            <li onclick="qx()">取消</li>
            <li onclick="qd()">
                <a href="tel:4008009360">呼叫</a>
            </li>
            
        </ul>
    </div>
    <div class="opacity-gray"></div>
</div>
</body>
<script>
$('.tab-bar .tab-button').click(function () {
    $('.tab-bar .tab-button').removeClass('active');
    $(this).addClass('active').siblings().removeClass('active');
})

$('.kf').click(function(){
    $('.pop-up').css('display','block');
    $('.opacity-gray').css('display','block');
})
function qx(){
    $('.pop-up').css('display','none');
    $('.opacity-gray').css('display','none');
}
function qd(){
    $('.pop-up').css('display','none');
    $('.opacity-gray').css('display','none');
}

</script>
<script>
    $(function(){
        //验证是否登陆
        var user_id = sessionStorage.getItem('userId');
        if (user_id == null) {
            alert('请先登录！');
            window.location.href = 'login.html';
        }
        //获取轮播图片
        getBanner();
        //置顶分类
        getTop();
        //主推产品列表
        getmainList();
        //特色产品列表
        getcharList();
        //热门推荐产品列表
        gethotList();
        //清楚一级导航ID
        sessionStorage.removeItem("oneLevel");
    });
    //获取轮播图片
    function getBanner(){
        $.ajax({
            url: url() + 'api/index/sowingMap',    //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "GET",   //请求方式
            success: function (data) {
                // console.log(data);
                // 请求成功时处理
                if(data.status==1){
                    var html1 = '';
                    $.each(data.result, function (i, item) {
                        html1+='<div class="swiper-slide">';
                        html1+='<a href="javascript:;">';
                        html1+='<img src="'+imgUrl()+item.ad_code+'" style="height:1.4rem;display:block;width:100%";/>';
                        html1+='</a>';
                        html1+='</div>';
                    });
                    $('.swiper-wrapper').html(html1);
                    var mySwiper = new Swiper('.swiper-container', {
                        direction: "horizontal",
                        loop: true,
                        autoplay:true,
                        autoplay: {
                            delay: 2000,
                            stopOnLastSlide: false,
                            disableOnInteraction: false,//
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            type: 'bullets'
                        },
                        autoplayDisableOnInteraction : false,
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        //observeParents:true,//修改swiper的父元素时，自动初始化swiper
                        observeParents:true,
                        calculateHeight: true
                    })
                } else {
                    console.log('填充图片失败！');
                }
            }
        });
    };
    //置顶分类
    function getTop() {
        $.ajax({
            url: url() + 'api/index/Top',    //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "GET",   //请求方式
            success: function (data) {
                // console.log(data);
                // 请求成功时处理
                if(data.status==1){
                    var html1 = '';
                    var html2 = '';
                    html1+='<dl>';
                    html1+='<dt><a href="publishDemand.html"><img src="images/index_option1.png" alt=""></a></dt>';
                    html1+='<dd>发送需求</dd>';
                    html1+='</dl>';
                    $('.top-option').html(html1);
                    $.each(data.result, function (i, item) {
                        html2+='<dl>';
                        html2+='<dt><a href="webDevelopment.html?cat_id='+item.id+'"><img src="'+imgUrl()+item.image+'" alt=""></a></dt>';
                        html2+='<dd>'+item.name+'</dd>';
                        html2+='</dl>';
                    });
                    $('.top-option').html(html1+html2);
                } else {
                    console.log(data.msg);
                }
            }
        });
    }
    //主推产品
    function getmainList(){
        $.ajax({
            url: url() + 'api/index/mainPush', //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "GET",   //请求方式
            success: function (data) {
                // console.log(data);
                //请求成功时处理
                if(data.status==1){
                    var html1 = '';
                    html1+='<img src="'+imgUrl()+data.main.image+'" alt="">';
                    html1+='<b>'+data.main.name+'</b>';
                    html1+='<span>'+data.main.introduce+'</span>';
                    $('#mainList').html(html1);
                    var html2 = '';
                    html2+='<a href="productDetail.html?goods_id='+data.goods.goods_id+'">';
                    html2+='<dt><img src="'+imgUrl()+data.goods.original_img+'"/></dt>';
                    html2+='</a>';
                    html2+='<p>'+ data.goods.goods_name +'</p>';
                    html2+='<p class="depict">'+data.goods.goods_remark+'</p>';
                    $('#goodsFind').html(html2);
                } else {
                    console.log('填充主推产品失败！');
                }
            }
        });
    };
    //特色产品
    function getcharList(){
        $.ajax({
            url: url() + 'api/index/characteristic', //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "GET",   //请求方式
            success: function (data) {
                // console.log(data);
                //请求成功时处理
                if(data.status==1){
                    var html1 = '';
                    $.each(data.result, function (i, item) {
                        html1+='<a href="webDevelopment.html?cat_id='+item.id+'">';
                        html1+='<dl>';
                        html1+='<dt><img src="'+imgUrl()+item.image+'"/></dt>';
                        html1+='<dd>';
                        html1+='<p>'+ item.name +'</p>';
                        html1+='<p>'+item.introduce+'</p>';
                        html1+='</dd>';
                        html1+=' </dl>';
                        html1+='</a>';
                    });
                    $('#charList').html(html1);
                    var html2 = '';
                    html2+='<img src="'+imgUrl()+data.char.image+'" alt="">';
                    html2+='<b>'+data.char.name+'</b>';
                    html2+='<span>'+data.char.introduce+'</span>';
                    $('#char_name').html(html2);
                } else {
                    console.log('填充特色产品失败！');
                }
            }
        });
    };
    //热门产品
    function gethotList(){
        $.ajax({
            url: url() + 'api/index/hotProducts', //请求的url地址
            dataType: "JSON",   //返回格式为json
            async: true,//请求是否异步，默认为异步，这也是ajax重要特性
            type: "GET",   //请求方式
            success: function (data) {
                // console.log(data);
                //请求成功时处理
                if(data.status==1){
                    var html1 = '';
                    $.each(data.result, function (i, item) {
                        html1+='<a href="webDevelopment.html?cat_id='+item.id+'">';
                            html1+='<dl>';
                                html1+='<dt><img src="'+imgUrl()+item.image+'"/></dt>';
                                html1+='<dd>';
                                    html1+='<span class="product-name">'+ item.name +'</span>';
                                    html1+='<div class="product-money"><span>'+item.introduce+'</span>起</div>';
                                html1+='</dd>';
                            html1+='</dl>';
                        html1+='</a>';
                    });
                    $('#hotList2').html(html1);
                    var html2 = '';
                    html2+='<img src="'+imgUrl()+data.hot.image+'" alt="">';
                    html2+='<b>'+data.hot.name+'</b>';
                    html2+='<span>'+data.hot.introduce+'</span>';
                    $('#hots_name').html(html2);
                } else {
                    console.log('填充热门产品失败！');
                }
            }
        });
    };
</script>

</html> 






